---
import table from "@/assets/formula/crafting_table.png";
import SingleItem from "./components/SingleItem.astro";
import type { CraftingShapelessFormula } from "@/types/formula";
import useIcon from "@/hooks/useIcon";
import { Image } from "astro:assets";
import { AstroError } from "astro/errors";

export interface Props {
  formula: CraftingShapelessFormula;
  alt?: string;
}

const {
  formula: { result, ingredients },
  alt = "合成配方",
} = Astro.props;

const resultIcon = useIcon(result.item);

if (!resultIcon) throw new AstroError(`找不到以下物品图标: ${result}`);

const res = ingredients.map((v) => useIcon(v.item)!);
---

<div class="relative mb-1 w-80 h-40 origin-top-left md:scale-100 scale-90">
  <Image src={table} alt={alt} class="!bg-transparent" />
  <div class="absolute w-[108px] top-[32px] left-[44px] flex flex-wrap">
    {
      res.map((v) => (
        <div class="m-[2px] w-8 h-8">
          {v ? (
            <SingleItem src={v.smallIcon} title={v.name} id={v.registerName} />
          ) : undefined}
        </div>
      ))
    }
  </div>
  <div class="absolute left-[226px] top-[62px] p-2">
    <SingleItem
      src={resultIcon.smallIcon}
      title={resultIcon.name}
      count={result.count}
    />
  </div>
  <div
    class="absolute left-72 bottom-1"
    title="该物品是无序合成，即不用按顺序摆放就可以合成。"
  >
    <svg
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="3190"
      data-darkreader-inline-fill=""
      width="25"
      height="25"
      ><path
        d="M960 698L757.1 562.7v84.5h-145l-88.8-108.6-65.5 80.1 91 111.3c9.6 11.8 24 18.6 39.2 18.6h169v84.6L960 698zM283.8 275.3H114.7C86.7 275.3 64 298 64 326c0 28 22.7 50.7 50.7 50.7h145l88.8 108.5 65.5-80.1-91-111.3c-9.6-11.6-24-18.5-39.2-18.5"
        fill="#333"
        p-id="3191"
        style="--darkreader-inline-fill: #191b1c;"
        data-darkreader-inline-fill=""></path><path
        d="M960 326L757.1 190.8v84.5h-169c-15.3 0-29.6 6.8-39.2 18.6L259.7 647.2h-145c-28 0-50.7 22.7-50.7 50.7 0 28 22.7 50.7 50.7 50.7h169.1c15.2 0 29.6-6.8 39.3-18.6l289-353.3h145v84.6L960 326z"
        fill="#333"
        p-id="3192"
        style="--darkreader-inline-fill: #191b1c;"
        data-darkreader-inline-fill=""></path></svg
    >
  </div>
</div>
